<template>
  <div class="self">
    <div class="memberInfo">
      <img
        :src="imgUrl + '/bigRun/bgc/bg-toubu.png'"
        alt=""
        class="backgroundImg"
      />
      <div class="top">
        <div class="say">
          <span class="hello">尊敬的广发用户您好！</span>
        </div>
      </div>

      <div class="bottom">
        <!--轮播 -->
        <swiper
          ref="mySwiper"
          :options="swiperOption"
          id="swiper"
          class="container-swiper"
        >
          <swiper-slide
            class="container-swiper-list"
            v-for="(item, index) in vipInterestsList"
            :key="index"
          >
            <div class="vipBox" @click="buyVip(item.equityNo)">
              <img :src="item.equityBgImg" class="bgcImg" />
              <!-- 背景图-->
              <div class="copyBox">
                <div
                  :style="index === 0 ? name1 : name1"
                  class="name"
                  v-if="index == 0"
                >
                  <img :src="item.equityIcon" class="ico" />
                  {{ item.equityName }}
                </div>
                <div :style="index === 1 ? name2 : name3" class="name" v-else>
                  <img :src="item.equityIcon" class="ico" />
                  {{ item.equityName }}
                </div>
                <div style="display: flex" class="bottom">
                  <div
                    class="name1"
                    :style="index === 0 ? name1 : name1"
                    v-if="index === 0"
                  >
                    预计可省
                  </div>
                  <div
                    class="name1"
                    :style="index === 1 ? name2 : name3"
                    v-else
                  >
                    预计可省
                  </div>
                  <div class="price1">¥ {{ item.reducedAmount }}</div>
                </div>
                <div
                  class="bottom1"
                  :style="index === 0 ? name1 : name1"
                  v-if="index == 0"
                >
                  {{ item.subhead }}
                </div>
                <div
                  class="bottom1"
                  :style="index === 1 ? name2 : name3"
                  v-else
                >
                  {{ item.subhead }}
                </div>
                <div class="yesBuy">立即购买</div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <!--轮播 -->
      </div>
    </div>

    <div class="selfList">
      <div class="bgWhite orderCon">
        <div class="selfInfo" @click="goOrder(0)">
          <div class="selfInfoIcon">
            <span>我的订单</span>
          </div>
          <div class="selfInfoIcon">
            <span class="rightAlert">查看全部订单</span>
            <img
              :src="imgUrl + '/bigRun/ico/icon-fanhui.png'"
              alt=""
              class="selfArrow"
            />
          </div>
        </div>
        <div class="line"></div>
        <div class="flexAround orderTabCon">
          <div class="orderTab" @click="goOrder(1)">
            <img :src="imgUrl + '/bigRun/ico/paywallet.png'" alt="" /><span
              >待付款</span
            >
          </div>
          <div class="orderTab" @click="goOrder(5)">
            <img :src="imgUrl + '/bigRun/ico/wuliu.png'" alt="" /><span
              >待收货</span
            >
          </div>
          <div class="orderTab" @click="goOrder(2)">
            <img :src="imgUrl + '/bigRun/ico/fahuo.png'" alt="" /><span
              >已完成</span
            >
          </div>
          <div class="orderTab" @click="goOrder(4)">
            <img :src="imgUrl + '/bigRun/ico/shouhou.png'" alt="" /><span
              >退款/售后</span
            >
          </div>
        </div>
      </div>
      <div class="memberVip">
        <div class="box">
          <div class="iFont">我的权益</div>
          <div
            class="memberList1"
            ref="box"
            style="height: 69vw; overflow: hidden"
          >
            <div
              class="memberList"
              v-for="(item, index) in memberList"
              :key="index"
              ref="couponCon"
              style="height: 23vw"
            >
              <img
                :src="imgUrl + '/bigRun/bgc/my_ticket.png'"
                alt=""
                class="quanImg"
              />
              <div class="quanBox">
                <div class="left">
                  <div style="text-align: left" class="item1">
                    {{ item.productName }}
                  </div>
                  <div style="text-align: left" class="item2">
                    券码 {{ item.bqCouponCode }}
                  </div>
                  <div style="text-align: left" class="item3">
                    有效期：{{ item.periodStartTime | formatTime }} -
                    {{ item.periodEndTime | formatTime }}
                  </div>
                </div>
                <div class="roundBox">
                  <div
                    :style="item.useFlag === 0 ? rightRound : rightRound1"
                    class="rightRound"
                    @click="receive(item)"
                  >
                    {{ (isReceive = item.useFlag === 0 ? "未领取" : "已领取") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-show="memberList.length > 3" style="margin-top: 2.733vw">
            <div
              v-show="!memberList.isOpen"
              class="more"
              @click="showMore(memberList)"
            >
              查看更多
            </div>
            <div
              v-show="memberList.isOpen"
              class="more"
              @click="animate(memberList)"
            >
              收起
            </div>
          </div>
        </div>
      </div>

      <div class="selfInfo" @click="goLogist">
        <div class="selfInfoIcon">
          <img :src="imgUrl + '/bigRun/ico/addr.png'" class="icoImg" />
          <span>我的收货地址</span>
        </div>
        <div class="selfInfoIcon">
          <img
            class="selfArrow"
            :src="imgUrl + '/bigRun/ico/icon-fanhui.png'"
          />
        </div>
      </div>

      <a class="selfInfo1" href="tel:4008200668">
        <div class="selfInfoIcon" style="line-height: 3.33vw">
          <img :src="imgUrl + '/bigRun/ico/fakui.png'" class="icoImg" />
          <span>联系客服</span>
        </div>
        <div class="selfInfoIcon"></div>
      </a>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import Phone from '@/components/Phone'
import { Toast } from 'vant'
import { setToken, getToken } from '@/utils/auth'
import { dateFormat } from '@/utils'

export default {
  name: 'Self',
  components: {
    Phone,
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      rightRound: {
        color: '#CB1C37',
        backgroundColor: '#ffffff'
      },
      rightRound1: {
        color: '#ffffff',
        backgroundColor: '#CCB6A7'
      },
      name1: { color: '#C7C5C5' },
      name2: { color: '#935531' },
      name3: { color: '#ffffff' },
      show: false, //下拉框
      phoneList: [], //切换账号
      store_info: {  //电联客服
        phone: '021-31357900',
      },
      vipInterestsList: [], // vip权益列表显示
      equityNo: '', // equityNo
      memberList: [], // 权益列表
      phoneShow: false,
      phone: '17621760842',
      LogisticsList: [],
      isReceive: '',  //权益值 0 1
      num: 3, // 更多权益
      // 轮播配置
      swiperOption: {
        direction: 'horizontal',
        notNextTick: true,
        // 轮播信息配置
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        // autoplay: {
        //   delay: 2000,
        //   disableOnInteraction: false // 禁用交互
        // },
        // effect: 'coverflow', // 影响:3d流
        // centeredSlides: true,
        speed: 900,
        loop: false, // 无限循环
        slidesPerView: 'auto',
        spaceBetween: 20,
        paginationClickable: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }

    }
  },

  filters: {
    formatTime(val) {
      if (val) {
        // console.log('filters ====>>>> val', val)
        return val.split(' ')[0].replace(/-/g, '/')
      } else {
        return null
      }
    }
  },
  created() { },
  mounted() {
    this.getVipInterestsList()
    this.getInterestsList()
  },
  computed: {
    swiper() {
      // console.log(' this.$refs.mySwiper.$swiper ====>>>>', this.$refs.mySwiper.$swiper)
      return this.$refs.mySwiper.$swiper
    },

  },
  methods: {
    getVipInterestsList() { // vip权益列表展示
      this.$HttpPost(this.$api.vipInterestsList).then((res) => {
        if (res.code === '000') {
          this.vipInterestsList = res.content
          // console.log('vip权益列表展示=====>>>>>>>', this.vipInterestsList)
        }
      })
    },
    buyVip(equityNo) { // 购买 Vip
      this.$router.push({
        path: '/member/details',
        query: {
          equityNo: equityNo
        }
      })
    },
    getInterestsList() { // 权益列表展示
      const params = {}
      this.$HttpPost(this.$api.interestsList, params).then((res) => {
        if (res.code === '000') {
          this.memberList = res.content
          //  "isDoubleTwelve":0,                //类型：Number  必有字段  备注：是否是双十二活动券,0=否,  1=是 ===>> 跳到双十二活动的首页
          //  "productSecondClassify":"mock"     //类型：String  必有字段  备注：无
        }
      })
    },
    receive(item) { // 领取权益
      console.log('item', item, item.productSecondClassify, item.useFlag, item.equityNo)
      // Toast('权益领取页')
      if (item.useFlag == 0) {
        if (item.isDoubleTwelve == 1) {
          location.href = item.doubleTwelveUrl
        } else {
          if (item.productSecondClassify == 1) {
            this.$router.push({
              path: '/hotel/list',
              query: {
                activityProductNo: item.activityProductNo
              }
            })
          } else if (item.productSecondClassify == 2) {
            this.$router.push({
              path: '/actInterest',
              query: {
                activityProductNo: item.activityProductNo,
                equityNo: item.equityNo,
                productName: item.productName,
              }
            })
          } else if (item.productSecondClassify == 3) {
            this.$router.push({
              path: '/free',
              query: {
                activityProductNo: item.activityProductNo
              }
            })
          } else if (item.productSecondClassify == 7) {
            this.$router.push({
              path: '/goods/details',
              query: {
                activityProductNo: item.activityProductNo
              }
            })

            /**
             * @name: Hou
             * @msg: 子商品跳转 hotel/list
             * @Date: 2020-12-15 16:39:19
             */
          } else {
            this.$router.push({
              path: '/goods/details',
              query: {
                activityProductNo: item.activityProductNo,
              }
            })

          }
        }
      }
    },

    goOrder(val) { //订单icon
      if (this.phone) {
        this.$router.push({
          path: '/orderList',
          query: {
            val: val
          }
        })
        window._czc.push(['_trackEvent', '个人中心', '查看', '我的订单', 29])
      }
    },
    showMore(memberList) { // 查看更多权益
      this.$set(memberList, 'isOpen', 1)
      const len = this.memberList.length
      console.log(len)
      this.$nextTick(() => {
        this.$refs.box.style.height = this.$refs.couponCon[0].offsetHeight * len + 'px' // 一份的高度*个数
        console.log('this.$refs.couponCon[0].offsetHeight===>>>>>>>', this.$refs.couponCon[0].offsetHeight)
      })
    },
    animate(memberList) { // 收起
      this.$set(memberList, 'isOpen', 0)
      this.$nextTick(function () {
        this.$refs.box.style.height =
          this.$refs.couponCon[0].offsetHeight * 3 + 'px' // 一份的高度*个数
      })
    },
    goLogist() { //地址
      if (this.phone) {
        this.$router.push('/addressList')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.self {
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  padding-bottom: 150px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

.memberVip {
  background-color: #fff;
  padding: 33px 0;
  border-radius: 20px;
  width: 95.6vw;
  margin: 20px auto;
  font-family: PingFangSC, PingFangSC-Regular;

  .box {
    padding: 0 30px;

    .iFont {
      display: flex;
      justify-content: flex-start;
      font-size: 32px;

      margin-bottom: 35px;
    }

    .memberList1 {
      overflow: hidden;
      transition: height 0.3s ease-in-out;
    }

    .memberList {
      position: relative;

      .quanImg {
        width: 662px;
        height: 160px;
      }

      .quanBox {
        width: 662px;
        height: 160px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        .left {
          margin-top: 2.067vw;
          margin-right: 20.4vw;
          /**
          * @name: Hou
          * @msg: update
          * @Date: 2020-12-14 15:51:51
          */

          .item1 {
            font-size: 30px;
            color: #1a1a1a;
          }

          .item2 {
            font-size: 25px;
            color: #936231;
          }

          .item3 {
            margin-top: 8px;
            font-size: 20px;
            color: #c0c0c0;
          }
        }

        .roundBox {
          width: 150px;
          height: 160px;
          display: flex;
          justify-content: center;
          align-items: center;
          // background-color: green;
          position: absolute;
          right: 0.4%;
          bottom: 4%;
        }

        .rightRound {
          width: 90px;
          height: 90px;
          line-height: 90px;
          border-radius: 50%;
          font-size: 24px;
          font-family: PingFangSC, PingFangSC-Regular;
          // margin-top: 5%;
          // margin-left: 5%;
        }
      }
    }
  }

  .more {
    font-size: 28px;
    color: #999999;
    text-align: center;
  }
}

.self {
  width: 100%;
  background: rgba(244, 245, 247, 1);

  .memberInfo {
    height: 45.967vw;
    position: relative;
    z-index: 0;
    padding: 40px 0;

    .backgroundImg {
      // height: 420px;
      width: 100%;
      position: absolute;
      left: 0;
      top: -2px;
      z-index: -1;
    }

    .top {
      display: flex;
      justify-content: space-between;
      font-family: PingFangSC;
      margin-left: 47px;
      z-index: 99;

      .say {
        font-size: 40px;
        font-weight: 700;
        color: #1a1a1a;

        .hello {
          font-size: 26px;
          margin-top: 5px;
          margin-left: 3px;
        }
      }
    }

    .bottom {
      position: absolute;
      top: 16vw;
      // background-color: blue;
      height: 245px;
      width: 100%;
      z-index: -1;
      box-sizing: border-box;
      padding-left: 20px;

      .container-swiper-list {
        width: 450px;
        height: 245px;
        margin-right: 16px;
        text-align: center;

        .vipBox {
          position: relative;
          width: 450px;
          height: 245px;
          overflow: hidden;
          z-index: 0;
          // padding: 26px 0;
          .bgcImg {
            // border:1px solid gray;
            height: 32.667vw !important;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            display: block;
            z-index: -1;
          }

          .copyBox {
            padding: 0 42px;
            font-family: PingFangSC;
            margin-top: 3.5vw;

            .ico {
              width: 26px;
              height: 25px;
              margin-right: 13px;
              margin-top: 4px;
              // border: 1px solid #000;
            }

            .name {
              display: flex;
              font-weight: 600;
              font-size: 26px;
              line-height: 36px;
              z-index: 9;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .bottom {
              margin-top: -5.933vw;
              height: 10%;

              .name1 {
                font-size: 16px;
                color: #c8916d;
                margin-right: 5px;
              }

              .price1 {
                font-size: 16px;
                color: #cb1c37;
              }
            }

            .bottom1 {
              font-size: 20px;
              font-weight: 600;
              display: flex;
              justify-content: flex-start;
              margin-top: 7.733vw;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .yesBuy {
              height: 42px;
              width: 148px;
              background: linear-gradient(273deg, #b0071e 2%, #d1203c 98%);
              line-height: 42px;
              border-radius: 20px;
              color: white;
              font-size: 24px;
              margin-top: 3.3vw;
            }
          }
        }
      }
    }
  }

  .selfInfo {
    width: 100%;
    padding: 34px 45px 34px 42px;
    margin-top: 1.8vw;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;

    .selfInfoIcon {
      color: #353434;
      font-size: 30px;

      .icoImg {
        width: 26px;
        height: 31px;
        vertical-align: middle;
      }

      .rightAlert {
        position: relative;
        bottom: 3px;
      }

      img {
        width: 40px;
        margin-right: 10px;
      }

      .orderIcon {
        width: 29px;
        height: 35px;
      }

      .selfArrow {
        width: 15px;
        height: 25px;
      }
    }
  }

  .selfInfo1 {
    width: 100%;
    padding: 34px 45px 34px 42px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;

    .selfInfoIcon {
      color: #353434;
      font-size: 30px;

      .icoImg {
        width: 29px;
        height: 30px;
        vertical-align: middle;
      }

      .rightAlert {
        position: relative;
        bottom: 3px;
      }

      img {
        width: 40px;
        margin-right: 10px;
      }

      .orderIcon {
        width: 29px;
        height: 35px;
      }

      .selfArrow {
        width: 15px;
        height: 25px;
      }
    }
  }
}

.rightAlert {
  font-size: 27px;
  color: #b2b1b0;
  margin-right: 20px;
}

.orderCon {
  width: 717px;
  margin: 0 auto;
  border-radius: 20px;
  padding-bottom: 20px;

  .centerFont {
    margin: 10px 0;
  }
}

.selfInfo:nth-child(1) {
  background: 0 none;
}

.orderTabCon {
  padding: 22px 0;
}

.orderTab {
  img,
  span {
    margin: 0 auto;
    margin-top: 6px;
    display: block;
  }

  img {
    width: 64px;
    height: 58px;
  }

  span {
    font-size: 27px;
    color: #646463;
  }
}
</style>
